<template>
  <div>
    <u-popup :custom-style="{ height: '900rpx', overflow: 'auto' }" :show="show" closeOnClickOverlay @close="close">
      <view class="addMoviegoer pl-2 pr-2 pt-3">
        <view class="rounded-xl border border-gray-100 p-3 mt-4">
          <u-form ref="uForm" :model="formData" :rules="rules" label-width="80" labelPosition="left">
            <u-form-item borderBottom label="姓名" prop="bkiUseUserName">
              <u-input v-model="formData.bkiUseUserName" border="none" placeholder="请填写姓名" />
            </u-form-item>
            <u-form-item label="性别" prop="bkiUserSex" @click="showSex = true">
              <u-input
                v-model="formData.bkiUserSex"
                border="none"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择性别"
              />
              <template #right>
                <u-icon name="arrow-right"></u-icon>
              </template>
            </u-form-item>
            <u-form-item borderBottom label="证件号码" prop="bkiUserIdentity">
              <u-input v-model="formData.bkiUserIdentity" border="none" placeholder="请填写证件号码" />
            </u-form-item>
            <u-form-item borderBottom label="手机号" prop="bkiUserPhone">
              <u-input v-model="formData.bkiUserPhone" border="none" placeholder="请填写手机号" />
            </u-form-item>
          </u-form>
          <!--注释-->
          <view class="pay-desk">
            <u-button :custom-style="{ width: '100%' }" shape="circle" type="primary" @click="submit">确认</u-button>
          </view>
        </view>
        <u-action-sheet
          :actions="actions"
          :show="showSex"
          description="如果选择保密会报错"
          title="请选择性别"
          @close="showSex = false"
          @select="sexSelect"
        />
      </view>
    </u-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { GENDER } from '@/constants/base';
import { clone } from 'xe-utils';

const { proxy } = getCurrentInstance();

defineProps({
  show: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(['submit', 'close']);

const formData = ref({
  bkiUseUserName: '',
  userSex: '',
  bkiUserSex: '',
  bkiUserIdentity: '',
  bkiUserPhone: ''
});

const actions = computed(() => {
  const list = [];
  for (const genderKey in GENDER) {
    list.push({ value: genderKey, name: GENDER[genderKey] });
  }
  return list;
});

const rules = ref({
  bkiUseUserName: {
    type: 'string',
    required: true,
    message: '请填写姓名',
    trigger: ['blur', 'change']
  },
  bkiUserSex: {
    type: 'string',
    required: true,
    message: '请选择男或女',
    trigger: ['blur', 'change']
  },
  bkiUserIdentity: [
    {
      required: true,
      message: '请输入证件号码',
      trigger: ['change', 'blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value) => {
        return uni.$u.test.idCard(value);
      },
      message: '证件号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ],
  bkiUserPhone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: ['change', 'blur']
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value) => {
        return uni.$u.test.mobile(value);
      },
      message: '手机号不正确',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur']
    }
  ]
});

const showSex = ref(false);
// 选项
const sexSelect = (params) => {
  formData.value.userSex = params.value;
  formData.value.bkiUserSex = params.name;
  showSex.value = false;
  proxy.$refs.uForm.validateField('bkiUserSex');
};

const close = () => {
  emits('close', false);
};

const submit = () => {
  proxy.$refs.uForm
    .validate()
    .then(() => {
      emits('submit', clone(formData.value, true));

      proxy.$refs.uForm.resetFields();
    })
    .catch(() => {
      uni.$u.toast('校验失败');
    });
};
</script>

<style lang="scss" scoped>
.pay-desk {
  @apply h-20 font-bold flex items-center justify-between p-5  w-full;
}
</style>
